<template>
  <div>
    <el-form ref="college " :model="college" :inline="true" class="query-bar">
      <div class="query-row demo-form-inline">
        <div>
          <el-form-item>
            <el-button type="primary" @click="insertNewsCollege"
              >添加学院</el-button
            >
          </el-form-item>
        </div>
        <div>
          <el-form-item>
            <el-input
              maxlength="30"
              v-model="college.selectKey"
              placeholder="请输入关键字"
              class="sou"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button @click="find">查询</el-button>
          </el-form-item>
        </div>
      </div>
    </el-form>

    <p>总条数：{{collegeList.length}}</p>

    <div class="lx-table">
      <lx-table
        ref="myTable"
        :tableData="collegeList"
        :tableCols="tableCols"
        isIndex
        isSelection
        :currentPage="college.pageNum"
        :total="college.total"
        :pageSize="college.pageSize"
        @sizeChange="sizeChange"
        @currentChange="currentChange"
        @batchDel="batchDel"
        @select="selectItem"
      >
      <template slot="bottomOperate">
          <div>已选 {{selectedIdList.length}} </div>
      <el-button class="batch-del" @click="deletes" >批量删除</el-button>
      </template> 
      </lx-table>
    </div>



    <el-dialog :title="collegeFormTitle" :visible.sync="collegeFormVisible">
      <el-form :model="collegeForm" :rules="collegeRules" ref="collegeForm">
        <el-form-item label="学院名称" prop="groupName" class="formitem">
          <el-input
            v-model="collegeForm.groupName"
            autocomplete="off"
            class="el-inputs"
          ></el-input>
        </el-form-item>
        <el-form-item label="简介" prop="groupDesc" class="formitem">
          <el-input
            type="textarea"
            v-model="collegeForm.groupDesc"
            autocomplete="off"
          ></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="collegeFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitCollegeForm"
          >确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
   
<script>
import LxTable from "@/components/LxTable.vue";
export default {
  components: {
    "lx-table": LxTable,
  },
  async mounted() {
      this.selectGroupList();
      // console.log(this.organizationList);
	},
  data() {
    return {
      college: {
        collegeName:"",
        pageSize: 10,
        pageNum: 1,
        groupType: 2,
        total:0,
        selectKey:""
      },
      tableCols: [
        {
          label: "学院名称",
          prop: "collegeName",
          align: "center",
        },
        {
          label: "简介",
          prop: "groupDesc",
          align: "center",
        },
        {
          label: "操作",
          type: "Button",
          btnList: [
            {
              type: "text",
              label: "编辑",
              handle: (that, row) => this.edit(that, row),
            },
            {
              type: "text",
              label: "删除",
              handle: (that, row) => this.del(that, row),
            },
          ],
          width: 250,
          align: "center",
        },
      ],
      collegeList: [],
      collegeFormTitle: "添加学院",
      collegeFormVisible: false,
      collegeForm: {
        groupName: "",
        groupDesc: "",
        groupType: 2,
        parentGroupId:""
      },
      collegeRules: {
        groupName: [
          {
            required: true,
            message: "请输入学院名称",
            trigger: "blur",
          },
        ],
      },
      centerDialogVisible: false,
      selectedIdList:[]
    };
  },
  methods: {
    //编辑
    edit(t, row) {
				this.collegeFormTitle = "编辑学院";
				this.collegeForm = {
					parentGroupId: row.parentGroupId,
					groupName: row.groupName,
          groupDesc:row.groupDesc,
          groupType:2
				}
				this.collegeFormVisible = true;
			},
    currentChange(){
      this.college.pageNum = val;
			this.selectGroupList();
    },
    //删除
    del(t, row) {
				// let _this = this;
				// _this.$confirm('确定要删除当前数据吗?', '提示', {
				// 	confirmButtonText: '确定',
				// 	cancelButtonText: '取消',
				// 	type: 'warning'
				// }).then(async () => {
				// 	let ret = await _this.$api.deleteGroup(row.parentGroupId);
				// 	if (ret) {
				// 		_this.$message.success("删除成功");
				// 		let organize = _this.organize;
				// 		if (organize.pageNum > 1 && organize.total - (organize.pageNum - 1) * organize.pageSize ==
				// 			1) {
				// 			_this.organize.pageNum--;
				// 		}
				// 	}
				// 	_this.$refs.myTable.clearSelect();
				// 	_this.selectGroupList();
				// }).catch(() => {

				// })
			},
    //请求组织列表
    async selectGroupList() {
				let _this = this;
        let ret = await _this.$api.selectGroupList(this.college);
        console.log(ret);
				if (ret) {
					_this.organizationList = ret.list;
					_this.organize.total = ret.total;
				}
      },
      //添加组织显示弹窗
    insertNewsCollege() {
      this.collegeFormVisible = true;
      this.collegeFormTitle = "添加学院";
				this.collegeForm = {
					id: null,
					groupName: "",
          groupDesc:"",
          groupType:""
				}
				this.collegeFormVisible = true;
    },
    //添加或者修改成功后清空
    closeCollegeForm() {
				this.collegeForm = {
					id: null,
					groupName: "",
          groupDesc:"",
          groupType:""
				}
				this.collegeFormVisible = true;
			},
    //添加或修改组织确认
    submitcollegeForm(){
      let _this = this;
				_this.$refs.collegeForm.validate(async (valid) => {
          let collegeForm = _this.collegeForm;
          console.log(collegeForm);
					if (valid) {
						let t = "";
						if(collegeForm.parentGroupId){
							t = "编辑";
							
						}else{
							t = "添加";
						}
						let ret = await _this.$api.insertOrganizeGroup(collegeForm);
						if(ret){
							_this.$message.success(t+"成功");
							_this.selectGroupList();
						}
						_this.closeCollegeForm();
					} else {
						return false;
					}
				});
    },
    //搜索
    find() {
      this.college.pageNum = 1;
      this.selectGroupList();
    },
    sizeChange() {},
    currentChange() {},
    batchDel() {},
    deletes(){},
    selectItem(selectedList, selectedIdList){
				this.selectedIdList = selectedIdList;
			},
  },
};
</script>

<style lang="scss">
.batch-del{
    margin-left: 30px;
}
.sou {
  width: 228px !important;
  height: 40px;
  background: #ffffff;
  border: 1px solid #dcdcdc;
  opacity: 1;
  border-radius: 2px;
}
.el-dialog {
  width: 800px;
  height: 389px;
  background: #ffffff;
  box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.2);
  opacity: 1;
  border-radius: 4px;
}
.el-dialog__title {
  width: 64px;
  height: 21px;
  font-size: 16px;
  font-family: Microsoft YaHei;
  font-weight: bold;
  line-height: 22px;
  color: #000000;
  opacity: 1;
  margin-left: 20px;
}
.el-dialog__body {
  background: #fff;
  margin-top: 0;
  margin: 0 auto;
}
.el-inputs {
  width: 588px;
  height: 40px;
  background: #ffffff;
  border: 1px solid #dcdcdc;
  opacity: 1;
  border-radius: 4px;
}
.el-form-item__label {
  width: 135px;
  height: 40px;
  font-size: 14px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  line-height: 40px;
  color: #333333;
  opacity: 1;
  padding: 0 25px 0 0;
}
.el-dialog__header {
  height: 53px;
  line-height: 53px;
}
.formitem {
  margin-top: 20px;
  //   text-align: center;
}
.el-textarea__inner {
  width: 588px;
  height: 120px;
  background: #ffffff;
  border: 1px solid #dcdcdc;
  opacity: 1;
  border-radius: 4px;
  //   resize: none;
}
.el-textarea {
  width: 0;
}
.el-dialog__footer {
  margin: 0 auto;
  text-align: center;
}
</style>
